<template>
	<view class="main">
		<u-navbar
			title="个人作品集图片"
			@leftClick="navigateBack"
			safeAreaInsetTop
			fixed
			placeholder
			:autoBack="true"
		></u-navbar>
		<view class="block">
			<view class="block__content">
				<u--form
					labelPosition="left"
					:model="info"
					ref="form"
				>
					<u-form-item
						label="作品集"
						labelWidth="80"
					>
					<view style="display:flex; justify-content: right;color:blue;" @click="upload">选择图片</view>
					</u-form-item>
					
					<u-form-item>
						<view style="display: flex;width: 100%;flex-wrap: wrap;">
							<block v-for="(item,index) in imgs" v-if="imgs.length > 0">
								<view style="position: relative;">
									<view style="width: 40rpx;height: 40rpx;position: absolute;z-index: 1;top: -8rpx; right: 12rpx;">
										<u-icon name="close-circle" color="#ff0000" size="24" @click="delimg(index)"></u-icon>
									</view>
									<image @click="shoImg(index)" style="width: 180rpx;height:180rpx;margin-left: 20rpx;margin-bottom: 10rpx;" :src="imgURL + item"></image>
								</view>
							</block>
						</view>
					</u-form-item>
				</u--form>
				<u-button
					type="primary"
					text="提交"
					customStyle="margin-top: 50px"
					@click="submit"
				></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import util from "@/utils/utils.js"
	import { getMyResume,saveBasic } from '@/api/resume.js'
	import { imgURL } from '@/utils/config'
	export default {
		data() {
			return {
				imgURL:imgURL,
				info:{},
				imgs:[]
			}
		},
		onLoad() {
			this.getResume()
		},
		methods: {
			//提交参数
			getResume() {
				getMyResume({}).then(res=>{
					if(res.code == 200){
						this.info = res.data
						if(res.data.imgs){
							this.imgs = JSON.parse(res.data.imgs)
						}
					}
					else{
						return uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				})
			},
			
			delimg(index){
				this.imgs.splice(index,1)
			},
			shoImg(index){
				var imgbox = [];
				for(let i in this.imgs){
					imgbox.push(this.imgURL+this.imgs[i])
				}
				uni.previewImage({
					//当前显示图片
					current: imgbox[index],
					//所有图片
					urls: imgbox
				})
				//util.previewImage(index)
			},
			//提交参数
			submit() {
				
				if (this.imgs.length == 0) {
					return uni.showToast({
						icon: 'none',
						title: '请上传作品集'
					});
				}
				
				if (this.imgs.length > 11) {
					return uni.showToast({
						icon: 'none',
						title: '作品集最多只能上传12张'
					});
				}
				this.info.imgs = JSON.stringify(this.imgs)
			
				saveBasic(this.info).then(res=>{
					if(res.code == 200){
						uni.showToast({
							title:res.msg,
							duration: 2000,
							icon:'none',
							success() {
								console.log(res)
								uni.redirectTo({
									url: '/resume/details'
								});
							}
						});
					}
					else{
						return uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				})
			},
			
			// 上传视频
			async upload() {
				let _this = this;
				
				if (this.imgs.length > 11) {
					return uni.showToast({
						icon: 'none',
						title: '作品集最多只能上传12张'
					});
				}
				util.uploadFile("/user/Upload").then((res)=>{
					if(res.code == 200){
						uni.showToast({
							title:res.msg,
							duration: 2000,
							icon:'none',
							success() {
								_this.imgs.push(res.data)
							}
						});
					}
					else{
						return uni.showToast({
							title:res.msg,
							duration: 2000,
							icon:'none'
						});
					}
				})
			},
		},
	}
</script>

<style lang="scss">
	.main{
		margin: 50rpx;
	}
</style>
